body{
    -webkit-print-color-adjust:exact;
}

table {
    margin: 2% auto;
    border:none;
}

.empty {
    border:none;
}

.maze-cell {
    width: 14%;
    position: relative;
    text-align: center;
    padding: 10px;
    border-style: solid;
}

.medium-maze-cell {
    width: 12.5%;
    position: relative;
    text-align: center;
    padding: 13px;
}

.large-maze-cell {
    width: 10%;
    position: relative;
    text-align: center;
    padding: 10px;
    background-color: rgba(0,0,0,0);
}

.index-table {
    table-layout: fixed;
    width: 100%;
    text-align: center
}
.index-table tr:nth-of-type(1)
{
    background-color: lightgray;
}
.index-table td {
    height: 40px;
}

.index-table th {
    height: 40px;
}

.maze-cell:after {
    content: '';
    display: block;
    margin-top: 100%;
    width: inherit;
}

.large-maze-cell:after {
    content: '';
    display: block;
    margin-top: 100%;
}

img.keypad-symbol-image {
    width: 100%;
    height: auto;
}

.mult-table td{
    table-layout: fixed;
    width: 35px;
    height: 30px;
}

th .vertical
{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

@media screen and (max-width: 900px) {
    table.keypad-table td {
        padding: 0;
        line-height: 1.2;
    }
    img.keypad-symbol-image {
        width: 10mm;
        height: 10mm;
    }
    table.keypad-table td.keypad-table-spacer {
        padding: 0 1mm;
    }
}

.keypad-table {
    font-family: Special Elite;
}
.yellow
{
    color: yellow;
    background-color: lightgray;
}
.red
{
    color: red;
}
.blue
{
    color: blue;
}
.orange
{
    color: orange;
}
.green
{
    color: green;
}
.purple
{
    color: purple;
}
.black {
    color: black;
}
.keypad-table-column {
    background-color: rgba(0,0,0,0);
}
img.symbol-image-small {
    height: 40px;
    width: 40px;
}
img.symbol-image-smaller {
    height: 30px;
    width: 30px;
}
table.runicwires tr th:nth-of-type(1){
    background-color: lightgray
}
table.colorcompass{
    font-size: 80%;
}
table.wireinstructions tr td:nth-of-type(1)
{
    background-color: lightgray;
}
table.multiplier-table td:nth-of-type(1)
{
    background-color: lightgray;
}
table.led-directions tr:nth-of-type(3n+1)
{
    background-color: lightgray;
}
table.color-dominance tr:nth-of-type(1) th
{
    background-color: lightgray;
}
q
{
    font-family: "Arrows";
}
/*Mostly for divs inside svg images*/
div.outerDivInSvg1
{
    display: inline-block;
    font-size: 12px;
    font-family: Helvetica;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
}
div.outerDivInSvg2
{
    display: inline-block;
    font-size: 12px;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
}
div.outerDivInSvg3
{
    display: inline-block;
    font-size: 12px;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    width: 107px;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
}
div.outerDivInSvg4
{
    display: inline-block;
    font-size: 12px;
    font-family: Helvetica;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    width: 8px;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
}
div.outerDivInSvg5
{
    display: inline-block;
    font-size: 12px;
    font-family: Helvetica;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    width: 7px;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
}
div.outerDivInSvg6
{
    display: inline-block;
    font-size: 12px;
    font-family: Helvetica;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    vertical-align: top;
    width: 9px;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
}
div.innerDivInSvg
{
    display: inline-block;
    text-align: inherit;
    text-decoration: inherit;
    white-space: normal;
    font-family: Special Elite;
}
div.innerDivInSvg2
{
    display: inline-block;
    text-align: inherit;
    text-decoration: inherit;
    background-color: #ffffff;
    font-family: Special Elite;
}

.dark .keypad-symbol-image {
    background-color: rgba(0,0,0,0);
}
.dark div.innerDivInSvg2, .dark div.innerDivInSvg {
    color: #DDD;
    background-color: #222;
}
.dark img.ondark, .dark .keypad-symbol-image {
    filter: invert(80%);
}
.dark img.grayback {
    background-color: lightgray;
}
.dark rect.onfilldark {
    fill: #222;
}
.dark svg text.ondark {
    fill: #DDD;
}
.dark svg rect.ondark, .dark svg path.ondark, .dark svg ellipse {
    stroke: #DDD;
}